import { Card, Form, Input, Button, message } from "antd"
import logo from "@/logo.svg"
import './index.scss'
import { useState } from "react"
import { useDispatch } from "react-redux"
import { fetchLogin } from "@/store/modules/user"
import { useNavigate } from "react-router-dom"

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [formLayout] = useState('horizontal')
  const formItemLayout =
    formLayout === 'horizontal'
      ? {
          labelCol: {
            span: 6,
          },
          wrapperCol: {
            span: 16,
          },
        }
      : null;
  const wrapperCol = {
    span: 24,
    offset: 0
  }
  const onFinish = async (values) => {
    console.log('Received values of form: ', values)
    await dispatch(fetchLogin(values))
    // 1.跳转首页
    navigate('/')
    // console.log('loginRes', loginRes)
    // 2.提示用户
    message.success('登录成功')
  }
  return (
    <div className="login flex flex-column align-center">
      <Card className="login_container">
        <img className="login-logo" src={logo} alt="" />
        {/* <Icon type="star" theme="filled" /> */}
        <Form {...formItemLayout} validateTrigger="onBlur" 
          onFinish={onFinish}>
          <Form.Item
            label="手机号"
            name="mobile"
            rules={[{
                required: true,
                message: '请输入手机号'
              }, {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号格式'
              }
            ]}>
            <Input size="large" placeholder="请输入手机号"></Input>
          </Form.Item>
          <Form.Item
            label="验证码"
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码'
              }
            ]}>
            <Input size="large" placeholder="请输入验证码"></Input>
          </Form.Item>
          <Form.Item wrapperCol={wrapperCol}>
            <Button className="submitBtn" type="primary" htmlType="submit" size="large">登录</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
